import { useLocation, useNavigate, matchPath } from 'react-router-dom'
import { useEffect, useMemo } from 'react'
import { getRouteByKey, routes } from '@/routes/menus'
import { ROUTE_CONFIG, ROUTE_KEY } from '../routes/menus'

export const useTitle = (title: string) => {
  /**
   useEffect后面的数组指定了useEffect的依赖项，
   这个数组是可选的，但如果你提供了它，React将仅在数组中的某个值发生变化时
   重新运行副作用函数。这是一种性能优化手段，因为它可以防止在每次组件渲染时
   都执行副作用函数，而只在依赖项发生变化时执行。
  */ 
  useEffect(() => {
    document.title = title
  }, [title])
}

// 通用页面跳转
export const useGoTo = () => {
  const nav = useNavigate()
  const back = () => nav(-1)
  const go = (
    pageKey?: string,
    params?: Record<string, string | number>,
  ) => {
    if (!pageKey) {
      nav('/')
      return
    }
    const route = getRouteByKey(pageKey)
    if (route && route.path) {
      if (!params) {
        nav(`/${route.path}`)
        return
      }
      // /page/:id params: { id: 1 } => /page/1
      const url = route.path.replace(
        /\/:(\w+)/g,
        (_: string, exp1: string) => `/${params[exp1]}`,
      )
      nav(`/${url}`)
    }
  }
  return { back, go }
}

/**
 * 获取当前 URL 匹配的路由
 */
export const useMatchedRoute = () => {
  const loc = useLocation()
  /**
   * useMemo：主要用于缓存计算结果，以避免在组件的每次渲染时都进行昂贵的计算。
   * 它通过比较依赖项（第二个参数）来决定是否重新计算值。只有当依赖项发生变化时，
   * 才会重新计算并返回新的结果，否则返回缓存的值。
   */
  const route = useMemo(() => routes.find((r) => matchPath(r.path, loc.pathname)), 
    [loc.pathname])
  return route
}

export const useIsOrgRoute = () => {
  const curRoute = useMatchedRoute()
  if(curRoute?.path === ROUTE_CONFIG[ROUTE_KEY.ORG].path) {
    return true
  }
  return false
}
